<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta
			name="viewport"
			content="width=device-width, minimal-ui, viewport-fit=cover, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
		/>
		<title>GEngine Render Library</title>
		<link href="./index.css" rel="stylesheet" />
	</head>
	<body>
		<div class="Side">
			<a class="Title" href="https://github.com/GEngine-js/GEngine">GEngine</a>
			<div class="SubTitle">Examples</div>
			<div class="Section">Geometry</div>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/geometry/box.html">BoxGeometry</a>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/geometry/plane.html">PlaneGeometry</a>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/geometry/sphere.html"
				>SphereGeometry</a
			>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/geometry/torusKnot.html"
				>TorusKnotGeometry</a
			>
			<div class="Section">Animation</div>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/skin/gltf-skin.html">Skin</a>
			<div class="Section">Mesh</div>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/mesh/axes.html">Axes</a>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/mesh/skybox.html">SkyBox</a>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/mesh/instance.html">InstanceMesh</a>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/mesh/points.html">Points</a>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/mesh/sprite.html">Sprite</a>
			<div class="Section">Materials</div>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/material/blinn-phongMaterial.html"
				>Blinn-PhongMaterial</a
			>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/material/pbrMaterial.html"
				>PbrMaterial</a
			>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/material/shaderMaterial.html"
				>ShaderMaterial</a
			>
			<div class="Section">Loader</div>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/loader/gltf-loader.html"
				>GLtf-Loader</a
			>
			<div class="Section">Light</div>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/light/ambient.html">Ambient</a>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/light/spotLight.html">SpotLight</a>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/light/pointLight.html">PointLight</a>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/light/dirtectlight.html"
				>Dirtectlight</a
			>
			<div class="Section">Shadow</div>
			<a
				class="Example"
				href="https://gengine-js.github.io/GEngine/example/shadow/directionalLightCascadedShadow.html"
				>DirectionalLightCascadedShadow</a
			>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/shadow/directionalLightShadow.html"
				>DirectionalLightShadow</a
			>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/shadow/pointLightShadow.html"
				>PointLightShadow</a
			>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/shadow/spotLightShadow.html"
				>SpotLightShadow</a
			>
			<div class="Section">Native</div>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/native/cube1.html">cube1</a>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/native/textureCube.html"
				>textureCube</a
			>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/native/particles.html">particles</a>
			<div class="Section">Helper</div>
			<a class="Example" href="https://gengine-js.github.io/GEngine/example/helper/shadowMapDebugger.html"
				>shadowMapDebugger</a
			>
		</div>
		<iframe class="Iframe" allow="autoplay" src="./gltf.html"></iframe>
		<a class="SideIcon">&lt;</a>
		<a class="CodeIcon" href="https://gengine-js.github.io/GEngine/example/gltf.html" target="_blank">&lt;/&gt;</a>

		<script>
			const sourceLink = document.querySelector(".CodeIcon");
			const toggleLink = document.querySelector(".SideIcon");
			const exampleLinks = document.querySelectorAll("a.Example");
			const iFrame = document.querySelector(".Iframe");
			const sourcePath = "https://github.com/GEngine-js/GEngine/tree/main/example";

			toggleLink.addEventListener("click", (e) => {
				e.preventDefault();
				document.body.toggleAttribute("data-hideSidebar");
			});
			let loadQuery = location.search.split("src=");
			if (loadQuery[1]) {
				iFrame.src = loadQuery[1];
				sourceLink.href = sourcePath + loadQuery[1];
				highlight(loadQuery[1]);
			} else {
				// choose random example to show if none linked
				let target = exampleLinks[Math.floor(Math.random() * exampleLinks.length)];
				updateExample({ target });
			}

			exampleLinks.forEach((link) => {
				link.addEventListener("click", updateExample, true);
			});

			function updateExample(e) {
				let src = e.target.href.split("example/")[1];
				// Allow user to cmd/ctrl + click to open in new tab
				if (e.metaKey) {
					window.open(`${location.origin}${location.pathname}?src=${src}`, "_blank");
					return;
				}
				iFrame.src = e.target.href;
				sourceLink.href = sourcePath + src;
				highlight(src);

				// Update search query
				history.pushState(null, null, `${location.origin}${location.pathname}?src=${src}`);
				e.preventDefault && e.preventDefault();
			}
			// Highlight and update others
			function highlight(src) {
				exampleLinks.forEach((link) => {
					let linkSrc = link.href.split("example/")[1];
					if (src === linkSrc) link.classList.add("active");
					else link.classList.remove("active");
				});
			}
		</script>
	</body>
</html>
